<template>
  <div class="dt">
    <div class="dtImg"></div>
    <div>
      <el-row>
        <el-col :span="16" style="height: 400px">
          <div id="dtChart"></div>
        </el-col>
        <el-col :span="8">
          <div class="total">
            <div style="color: #02b7fa">总数</div>
            <div>
              <span style="font-size: 30px; margin-right: 20px">{{
                total
              }}</span
              ><span class="yh_blue">个</span>
            </div>
          </div>
          <div class="fault">
            <div style="color: orange">故障数</div>
            <div>
              <span style="font-size: 30px; margin-right: 20px">{{
                fault
              }}</span
              ><span class="yh_blue" style="color: orange">个</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--<vueSeamlessScroll ref="seamlessScroll" :data="tableData" class="chartList">-->

    <!--</vueSeamlessScroll>-->

    <div class="chartList">
      <el-table
        :data="tableData"
        style="width: 100%; height: 63px"
        max-height="400"
      >
        <el-table-column prop="NAME" label="设备名称"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.state == "1" ? "故障" : "正常" }}
          </template>
        </el-table-column>
      </el-table>
      <div class="vueSeamless">
        <vueSeamlessScroll :data="tableData" class="seamless-warp">
          <ul>
            <li
              class="dtEquipmentList"
              v-for="(item, index) in tableData"
              :key="index"
              @click="fly($event)"
            >
              <el-row>
                <el-col :span="12">
                  <div :data-obj="JSON.stringify(item)">{{ item.NAME }}</div>
                </el-col>
                <el-col :span="12">
                  <div :data-obj="JSON.stringify(item)">
                    {{ item.state ? "正常" : "故障" }}
                  </div>
                </el-col>
              </el-row>
            </li>
          </ul>
        </vueSeamlessScroll>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { getDt } from "../../../../utils/api";
import vueSeamlessScroll from "vue-seamless-scroll";
import { TUVector3, TUVector2, TURotator } from "tumap/dist/tumap.v1.8.js";
export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      total: 0,
      fault: 0,
      tableData: [],
      dtData: [],
      allEquipments: [],
    };
  },
  mounted() {
    this.getXFData();
    var temtreeData = JSON.parse(window.sessionStorage.getItem("treeData"));
    temtreeData &&
      this.treeForeach(temtreeData, (node) => {
        node.code && this.allEquipments.push(JSON.parse(JSON.stringify(node)));
      });
  },
  methods: {
    getXFData() {
      let that = this;
      getDt()
        .then((response) => {
          that.total = response.data.total;
          that.fault = response.data.alarmsNumber;
          that.tableData = response.data.data;
          that.initCharts();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    initCharts() {
      var dom = document.getElementById("dtChart");
      var mydtChart = this.$echarts.init(dom);
      var app = {};
      var option = null;
      option = {
        // backgroundColor: '#1b1b1b',
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          formatter: "{a} <br/>{c} {b}",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 30,
                // color: "rgba(255,255,255,0)",
                color: [
                  [
                    1,
                    new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#ED1414",
                      },
                      {
                        offset: 0.6,
                        color: "#FFA200",
                      },
                      {
                        offset: 1,
                        color: "#D7D7D7",
                      },
                    ]),
                  ],
                ],
              },
            },
            pointer: {
              icon: "",
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: 10,
              splitNumber: 1,
              length: 30,
              lineStyle: {
                color: "rgba(255,255,255,0)",
                width: 10,
              },
            },
            splitLine: {
              distance: 10,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 15,
              fontSize: 15,
            },
            detail: {
              valueAnimation: true,
              formatter: function(value){
                return value.toFixed(3)+'%'
              },
              //color: 'auto',
              backgroundColor: "rgba(30,144,255,0.8)",
              borderWidth: 1,
              borderColor: "#fff",
              shadowColor: "#fff", //默认透明
              shadowBlur: 5,
              offsetCenter: [0, "70%"], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: "bolder",
                color: "#fff",
              },
              // offsetCenter: [0, "70%"],
            },
            title: {
              //设置仪表盘中间显示文字样式
              offsetCenter: [0, "30%"],
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 400,
                fontSize: 48,
                fontStyle: "Source Han Sans SC",
                color: "white",
              },
            },
            data: [
              {
                value:
                  this.fault == 0 || this.total == 0
                    ? 0
                    : ((this.fault * 100) / this.total).toFixed(2),
                name: "故障率",
              },
            ],
          },
          {
            name: "外层辅助线",
            type: "gauge",
            z: 1,
            min: 0,
            max: 10,
            splitNumber: 5,
            startAngle: -45,
            endAngle: -495,
            radius: "83%",
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 4,
                color: [[1, "#00AEFF"]],
                shadowBlur: 10,
                opacity: 0.5,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              // 分隔线
              show: false,
              length: 15,
            },
            detail: {
              show: false,
            },
            data: [],
            clockwise: false,
          },
        ],
      };
      if (option && typeof option === "object") {
        mydtChart.setOption(option, true);
      }
    },
    // 树的广度遍历
    treeForeach(tree, func) {
      let node,
        list = [...tree];
      while ((node = list.shift())) {
        func(node);
        node.children && list.push(...node.children);
      }
    },
    fly(e) {
      window.Sgworld.clearAllCovering();
      var timetype = window.sessionStorage.getItem("timeType");
      var weathertype = window.sessionStorage.getItem("weatherType");
      window.Sgworld.execute("grapi", "settime", { type: timetype }, null);
      window.Sgworld.execute(
        "grapi",
        "setweather",
        { type: weathertype },
        null
      );
      let item = JSON.parse(e.target.dataset.obj);
      let code = item.CODE;
      if (code) {
        for (let i = 0; i < this.allEquipments.length; i++) {
          if (code === this.allEquipments[i].code) {
            var newX = this.allEquipments[i].position.x;
            var newY = this.allEquipments[i].position.y;
            var newZ = this.allEquipments[i].position.z;
            var newRoll, newPitch, newYaw;
            var params = {
              name: code,
              location: new TUVector3(newX, newY, newZ),
              rotate: -45
            };
            // 从校验后的位置中取值
            axios.get("./static/json/PositionCalibration.json").then(res => {
              var positionCalibrationData = res.data;
              var tem = positionCalibrationData.find(item => {
                return item.name === code;
              });
              // 若当前点击的节点在校验文件中
              // 从校验文件中取值，并通过focusOn方法定位
              if (tem) {
                newRoll = tem.degree && tem.degree.roll;
                newPitch = tem.degree && tem.degree.pitch;
                newYaw = tem.degree && tem.degree.yaw;
                window.Sgworld.focusOn(
                  new TUVector3(newX, newY, newZ),
                  new TURotator(newRoll, newPitch, newYaw),
                  200,
                  () => {},
                  2
                );
              } else {
                // 当前点击的不在校验文件中 通过 设备名称进行定位
                window.Sgworld.execute("grapi", "AIPawnLocation", params, null);
              }
            });
            var temItem = {};
            temItem.x = newX;
            temItem.y = newY;
            temItem.z = newZ;
            temItem.name =
              "视频-" +
              this.allEquipments[i].floorId +
              "_" +
              this.allEquipments[i].id +
              "-" +
              this.allEquipments[i].label;
            temItem.id =
              this.allEquipments[i].floorId + "_" + this.allEquipments[i].id;
            temItem.scale = 0.3;
            temItem.image =
              window.ipUrl + "qy/static/images/popups/videoCommon.png";
            window.Sgworld.createBillboard(temItem);
            break;
          }
        }
      } else {
        this.$message("暂无设备code值！");
      }
    },
  },
};
</script>

<style scoped>
.dt {
  width: 100%;
  height: 40%;
}
.dt .dtImg {
  width: 688px;
  height: 66px;
  background: url("../../../../../static/images/equipment/dtSystem.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -50px;
}
#dtChart {
  height: 400px;
  width: 700px;
}
.chartList {
  width: 100%;
  height: 50%;
  margin-top: -60px;
}
.total {
  padding-left: 40px;
  width: 210px;
  height: 70px;
  background: url("../../../../../static/images/equipment/总数.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 80px 0;
  font-size: 20px;
}
.fault {
  padding-left: 40px;
  width: 210px;
  height: 70px;
  background: url("../../../../../static/images/equipment/故障数.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 10px;
  font-size: 20px;
}
.seamless-warp {
  height: 320px;
  overflow: hidden;
}
.dtEquipmentList {
  text-align: center;
  font-size: 26px;
}
.seamless-warp .dtEquipmentList .el-row {
  border-bottom: 1px solid #ccc;
}
.seamless-warp .dtEquipmentList .el-row:hover {
  background-color: rgba(0, 174, 255, 0.37);
}
</style>
